<template>
<div class="video-detail">
  <div class="video-header">
    <div class="video-title">
      <div class="title">{{videoInfo.videoName}}</div>
      <div class="video-info">
        <div class="iconfont icon-play2">{{videoInfo.playCount}}</div>
        <div class="iconfont icon-danmu">{{videoInfo.danmuCount}}</div>
        <div class="iconfont">{{proxy.Utils.GetDate(videoInfo.createTime)}}</div>
      </div>
    </div>
    <div class="video-user-info">
      <div class="avatar_img">
        <img :src="ImgURL+'/img/tximg/'+userInfo.imageUrl" v-if="userInfo.imageUrl">
      </div>
      <div class="user-info">
        <div class="title-top">
          <router-link class="nick-name" :to="`/user/${userInfo.uuid}`">{{userInfo.username}}</router-link>
          <router-link class="icon-name" :to="`/user/${userInfo.uuid}`">
            <el-icon size="14" color="black"><Message/></el-icon>发消息
          </router-link>
        </div>
        <div class="introduction">
          {{userInfo.noticeInfo || "这个人很懒，什么也没留下"}}
        </div>
        <div class="op-btn">
          <router-link class="btn-go-home" to="/user/${userInfo.uid}" target="_blank">访问主页</router-link>
          <div class="focus-btn">
            <el-dropdown v-if="userInfo.haveFocus == '1'">
              <el-button class="btn" type="info" style="width: 100%">
                <span class="iconfont icon-list"></span>已关注
                {{userInfo.focusCount}}</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="forusUser(-1)">取消关注</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button v-else class="btn" type="primary" @click="forusUser(1)">关注</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="video-body">
    <div class="video-left">
      <div class="video-panel" :style="{position:wideScreen?'absolute':'static'}">
        <Player @contextmenu.prevent @contextmenu="showAlert" ref="playerRef" @changeWideScreen="changeWideSscreenHandler"></Player>
      </div>
      <div :style="{
      'margin-top':wideScreen?playerHeight+100+'px':'15px',
      'margin-bottom':'40px'
    }">
<!-- 视频详情和简介等组件 -->
        <VidoDetall></VidoDetall>
        <VideoSummary v-if="Object.keys(videoInfo).length > 0"></VideoSummary>
        <VideoComment v-if="Object.keys(videoInfo).length > 0"></VideoComment>
      </div>
    </div>
    <div class="video-right" :style="{
      'margin-top':wideScreen?playerHeight+100+'px':'0',
      'margin-right':wideScreen?'15px':'5px'
    }">
<!-- 右侧组件，如弹幕等 -->
      <VideoDanmu></VideoDanmu>
      <VideoPList></VideoPList>
      <VideoRecomment v-if="Object.keys(videoInfo).length > 0"></VideoRecomment>
    </div>
  </div>
</div>
</template>
<script setup>
import VideoRecomment from "@/views/videoDetail/VideoRecommend.vue";
import {getCurrentInstance, nextTick, onMounted, onUnmounted, provide, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {ImgURL} from "@/utils/Request.js";
import navActionStore from "@/stores/navActionStore.js";
import {GetVideoInfo} from "@/api/video.js";
import {useLoginStore} from "@/stores/loginStore.js";
import {GetUserInfo} from "@/api/user.js";
import Player from "@/components/Player.vue";
import VideoPList from "@/views/videoDetail/videoPList.vue";
import VideoDanmu from "@/views/videoDetail/videoDanmu.vue";
import VidoDetall from "@/views/videoDetail/vidoDetall.vue";
import VideoSummary from "@/views/videoDetail/videoSummary.vue";
import VideoComment from "@/views/videoDetail/VideoComment.vue";
import video_getVideoInfo from "@/data/video_getVideoInfo.json";
import auth_userInfo from "@/data/auth_userInfo.json";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const playerRef = ref(null);
const loginStore = useLoginStore();
const NavActionStore = navActionStore();
const videoInfo = ref({});
const userInfo = ref({});
//播放器高度
const playerHeight = ref(0);
provide("playerHeight", (height)=>{
  playerHeight.value = height;
})
const getVideoInfo = async () => {
  const res = video_getVideoInfo;
  videoInfo.value = res.data;
  videoInfo.value.tags = res.data.tags?res.data.tags.split('，') || res.data.tags.split(','):[];
  videoInfo.value.introduction = proxy.Utils.escapeHtml(res.data.introduction || "");
  getUserInfo(videoInfo.value.userId);
};
const getUserInfo = async (userId) => {
  if(userId === undefined) return;
  const res = auth_userInfo.data;
  userInfo.value = res;
};
const forusUser = () => {

};
provide("videoInfo", videoInfo);
onMounted(() => {
  getVideoInfo();
  nextTick(() => {
    NavActionStore.setFixedHeader(false);
    NavActionStore.setFixedCategory(false);
    NavActionStore.setShowHeader(false);
    NavActionStore.setShowCategory(false);
    NavActionStore.setForceFixedHeader(true);
  });
});
const wideScreen = ref(false);
const changeWideSscreenHandler = (restrict) => {
  wideScreen.value = restrict
};
const showAlert = () => {
  mitter.emit("showAlert");
};
</script>
<style scoped lang="scss">
.video-detail {
  margin: 0 5%;
  margin-top: 64px;
  min-height: calc(100vh - 64px);
  .video-header{
    padding-top: 20px;
    display: flex;
    .video-title{
      flex: 1;
      .title{
        font-size: 18px;
      }
      .video-info{
        margin-top: 10px;
        display: flex;
        color: #9499a0;
        .iconfont{
          margin-right: 20px;
          font-size: 14px;
          &::before{
            font-size: 18px;
            margin-right: 3px;
          }
        }
      }
    }
    .video-user-info{
      .avatar_img{
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      margin-left: 20px;
      width: 410px;
      display: flex;
      align-items: center;
      .user-info {
        flex: 1;
        margin-left: 10px;
        .nick-name {
          font-size: 16px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          color: #000;
          text-decoration: none;
        }
        .icon-name{
          margin-left: 10px;
          font-size: 14px;
          color: black;
          text-decoration: none;
          .el-icon{
            position: relative;
            top: 2px;
            margin-right: 2px;
          }
          &:hover{
            .el-icon{
              color: #409EFF;
            }
            color: #409EFF;
          }
        }
      }
        .introduction{
          color: #9499a0;
          font-size: 13px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin: 3px 0;
        }
        .op-btn{
          display: flex;
          .btn-go-home{
            margin-right: 10px;
            text-decoration: none;
            color: #fb7299;
            border: 1px solid #fb7299;
            line-height: 28px;
            border-radius: 5px;
            padding: 0 20px;
            &:hover{
              background-color: #ffecf1;
            }
          }
          .focus-btn{
            flex: 1;
            width: 230px;
          }
          .el-dropdown{
            width: 100%;
          }
          .btn{
            width: 75%;
            .iconfont{
              margin-right: 5px;
            }
          }
        }
    }
  }
  .video-body{
      margin-top: 20px;
      position: relative;
      display: flex;
      .video-left{
        flex: 1;
      }
      .video-panel{
        position: static;
        width: 100%;
      }
      .video-right{
        margin-left: 30px;
        width: 410px;
        padding-bottom: 20px;
      }
  }
}
</style>